<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>条件渲染</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>

    <body>
        <div id="root">
            <h2>当前的n值是：{{n}}</h2>
            <button @click="n++">点击我n+1</button>
            <!--用v-show做条件渲染--DOM节点还存在就是不展示了--建议点击频繁使用-->
            <!-- <h1 v-show="1===1">欢迎回来，用户{{name}}</h1>-->
            <h1 v-show="choose">欢迎回来，用户{{name}}</h1>

            <!--用v-if做条件渲染--DOM节点不存在了--建议点击不频繁使用-->
            <!--使用v-if的时候，元素可能无法获取到，但是使用v-show的时候一定可以获取到-->
            <!-- <h1 v-if="1===1">欢迎回来，用户{{name}}</h1>-->
            <h1 v-if="choose">欢迎回来，用户{{name}}</h1>

            <div v-show="n==1">Angular-show</div>
            <div v-show="n==2">React-show</div>
            <div v-show="n==3">Vue-show</div>

            <!--if成立，则else部分直接跳过，哪怕成立也不展示，他们是一组判断-->
            <!--v-if和v-else-if，v-else可以一起使用，但是结构上不能打断，打断之后的代码无效-->
            <div v-if="n==1">Angular-if</div>
            <div v-else-if="n==2">React-else-if</div>
            <div v-else="n==3">Vue-else（最后一组没有判断条件）</div>

            <!--template不破坏结构，不影响样式设置,但是只能搭配v-if使用-->
            <template v-if="n==1">
                <h2>hello</h2>
                <h2>my name is ....</h2>
                <h2>could you give me a hand?</h2>
                <h2>=-=  ---->   0.0</h2>
            </template>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            new Vue({
                el: '#root',
                data: {
                    name: 'Marina',
                    choose: false,
                    n: '0',
                },
            })

        </script>
    </body>
</html>